import styles from './index.module.scss'
import { Input, Radio, Tooltip } from 'antd'
import { useAppDispatch, useAppSelector } from 'store/hook'
import { changeEditMode } from 'store/slices/systemSlice'

type PropsType = Partial<{
  setKeywords: React.Dispatch<React.SetStateAction<string>>
}>

export default function SearchBox({ setKeywords }: PropsType) {
  const onSearch = (keywords: string) => {
    // 非空断言
    setKeywords!(keywords.trim())
  }
  const { editMode } = useAppSelector(state => state.system)
  const dispatch = useAppDispatch()
  // 模式切换
  const onChange = (value: EditMode) => {
    dispatch(changeEditMode(value))
  }

  return (
    <div className={styles['search-box']}>
      <Input.Search size='large' placeholder='符号关键字' onSearch={onSearch} allowClear enterButton />
      <Radio.Group value={editMode} buttonStyle='solid' className='mt10' onChange={e => onChange(e.target.value)}>
        <Tooltip title='只可查询和复制符号' color='#55acee' placement='left'>
          <Radio.Button value='query'>查询模式</Radio.Button>
        </Tooltip>
        <Tooltip title='鼠标移入符号将显示 Edit 标识' color='#55acee' placement='right'>
          <Radio.Button value='edit'>编辑模式</Radio.Button>
        </Tooltip>
      </Radio.Group>
    </div>
  )
}
